<script setup lang="ts">
import { useGlobalStorage } from '@/stores/global.ts'
import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
import { useChatStorage } from '@/stores/chat.ts'
import { IsAllUserEnum } from '@/services/types.ts'

const chatStorage = useChatStorage()

const globalStorage = useGlobalStorage()
// 响应式窗口尺寸
const { width } = useWindowSize()
const returnVisibleMessage = computed(() => {
  if (width.value <= 640) {
    return globalStorage.visibleMessage
  } else {
    return false
  }
})

const toggle = globalStorage.toggleVisibleMessage

//会话列表数据
const chatList = computed(() =>
  chatStorage.sessionList.map((item) => {
    return {
      ...item,
      tag: item.hotFlag === IsAllUserEnum.Yes ? '官方' : '',
    }
  }),
)

const currentSeesion = computed(() => globalStorage.currentSession)
//
</script>

<template>
  <!--  会话列表-->
  <ul class="chat-list" v-show="!returnVisibleMessage">
    <li class="chat-item" v-for="(item, index) in chatList" :key="index" @click="toggle">
      <el-badge :value="1" :max="99">
        <el-image style="width: 38px; height: 38px" :src="item.roomAvatar" :fit="'cover'" />
      </el-badge>
      <div class="chat-info">
        <!--聊天对象-->
        <h3 class="chat-name">
          <span class="chat-user">{{ item.roomName }}</span>
          <span class="chat-name-icon">{{ item.tag }}</span>
        </h3>
        <!--聊天消息-->
        <p class="chat-message">{{ item.text }}</p>
      </div>
      <div class="chat-time">
        <!--聊天时间-->
        <p class="chat-time-text">12:00</p>
      </div>
    </li>
  </ul>
</template>

<style scoped lang="scss">
.chat-list {
  margin: 20px 10px;
  overflow-y: auto;

  .chat-item {
    width: 280px;
    height: 60px;
    background: white;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;

    .chat-info {
      margin-right: auto;
      .chat-name {
        text-align: center;

        .chat-user {
          font-size: 14px;
        }

        .chat-name-icon {
          display: inline-block;
          padding: 1px 4px;
          font-size: 12px;
          font-weight: bold;
          background-color: #efe2bb;
          color: #c59512;
          margin-left: 10px;
          border-radius: 3px;
        }
      }
    }

    .chat-message {
      font-size: 12px;
    }

    .chat-time {
      font-size: 14px;
    }
  }
}

@media (max-width: 768px) {
  .chat-list {
    .chat-item {
      width: 100%;
      transition: all 0.5s;
    }
  }
}
</style>
